<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib  uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

    <base href="<%=basePath%>">
    
     <!-- 给当前页面域添加一段java代码，用来自动获取当前项目名，不写死,然后再通过EL表达式获取 -->
    <%
    	pageContext.setAttribute("PATH",request.getContextPath());
    
     %>
    
   	
		
	
  	
  <!-- 搭建主页面显示 -->
  <div>
  	
  			<!--添加模态框的显示-->
				<div class="modal fade" id="mymodalE">
					<div class="modal-dialog"><!--对话框-->
						<div class="modal-content"><!--内容-->
							<div class="modal-header"><!--头部-->
								<div class="close" data-dismiss="modal">&times;</div><!--关闭按钮-->
									添加优选化妆
							</div>
							
							<div class="modal-body"><!--身体-->
								<form class="form-horizontal" enctype="multipart/form-data" method="post">
								  
								  <div class="form-group">
								    <label for="inputEmail3" class="col-md-3 control-label">上传图</label>
								    <div class="col-md-6">
								      <input type="file" name="img" id="mFileE" required="required" class="form-control" >
								    </div>
								  </div>
								  
								  <div class="form-group">
								    <label for="inputPassword3" class="col-md-3 control-label">缩略图</label>
								    <div class="col-md-6">
								    	<img id="mImgE" class="form-control" src="" style="width: 250px;height: 150px;">
								    </div>
								  </div>
								 
								 <div class="form-group">
								    <label for="inputEmail3" class="col-md-3 control-label">化妆师名</label>
								    <div class="col-md-6">
								      <input id="nameE" type="text" name="nameE" required="required" class="form-control" >
								    </div>
								  </div>
								 
								 <div class="form-group">
								    <label for="inputEmail3" class="col-md-3 control-label">区域</label>
								    <div class="col-md-6">
								      <input id="regionE" type="text" name="regionE"  required="required" class="form-control" >
								    </div>
								  </div>
								  <div class="form-group">
								    <label for="inputEmail3" class="col-md-3 control-label">经验</label>
								    <div class="col-md-6">
								      <input id="experienceE" type="text" name="experienceE" required="required" class="form-control" >
								    </div>
								  </div>
								  <div class="form-group">
								    <label for="inputEmail3" class="col-md-3 control-label">价格</label>
								    <div class="col-md-6">
								      <input id="priceE" type="text" name="priceE" required="required" class="form-control" >
								    </div>
								  </div>
								  <div class="form-group">
								    <label for="inputEmail3" class="col-md-3 control-label">简介信息</label>
								    <div class="col-md-6">
									    <textarea id="detailsE" rows="15" cols="30" name="detailsE" required="required" class="form-control">
									    </textarea>
								    </div>
								  </div>
								  
								  <div class="modal-footer"><!--尾部-->
										<button class="btn btn-danger" data-dismiss="modal">Close</button>
										<input type="button" class="btn btn-success saveE" value="添加"/>
									</div>
								</form>
							</div>
							
							
						</div>
					</div>
				</div>
  
  
  	
  
  	<!-- 标题行 -->
    <h3><span class="label label-info ">德林文化传媒有限公司</span></h3>
    	
    	<!-- 展示列表 -->
     <table class="table table-striped table table-hover">
       <tr>
	       <th>ID</th>
	       <th>图片的缩略图</th>
	       <th>化妆师名</th>
	       <th>区域</th>
	       <th>经验</th>
	       <th>价格</th>
	       <th>简介信息</th>
	       <th>操作</th>  
		    <div class="row">
	    		<div class="col-md-4 col-md-offset-6">
	    			<button class="btn btn-primary" data-toggle="modal" data-target="#mymodalE"">
	    				<span class="glyphicon glyphicon-plus"></span>
	    				添加信息
			       	</button>
   				</div>
   			</div> 
       </tr>
        <c:forEach items="${yxhzs}" var="list">
            <tr>
           	 	<td>${list.id}</td>
           	 	<td><img src="${list.picture}" height="50px" width="100px"></td>
           	 	<td>${list.name}</td>
           	 	<td>${list.region}</td>
           	 	<td>${list.experience}</td>
           	 	<td>${list.price}</td>
           	 	<td>${fn:substring(list.details,0,20)}...</td>
           	 	
           	 	
           	 	<td>
           	 		<div class="row">
			    		<div class="col-md-9 col-md-offset-0">
			    			<button type="button" class="btn btn-warning" onclick="updateYxhz(${list.id})">
			    				<span class="glyphicon glyphicon-scissors"></span>
			    					修改
			    			</button>
			    			
			    			<button type="button" class="btn btn-danger" onclick="deleteYxhz(${list.id})">
			    				<span class="glyphicon glyphicon-trash"></span>
			    					删除
			    			</button>
	    				</div>
    				</div>
           	 	</td>
           	 </tr>
        </c:forEach>
        
     </table>
    		
    </div>	
    
    	
<script>
   		
    	//保存按钮
		 $(".saveE").click(function(){
		 	var formData = new FormData(); 
		 	
		 	var fd =  $('#mFileE').get(0).files[0];
	 		var name = $('#nameE').val(); 
		 	var region = $('#regionE').val(); 
		 	var experience = $('#experienceE').val(); 
		 	var price = $('#priceE').val(); 
		 	var details = $('#detailsE').val(); 
		 	
		 	formData.append("fd",fd);
		 	formData.append("name",name);
		 	formData.append("region",region);
		 	formData.append("experience",experience);
		 	formData.append("price",price);
		 	formData.append("details",details);
		 	
		 	$.ajax({
	             url: "${PATH}/admin/insertYxhz.do",
	             type: "post",
	             data: formData,
	             processData: false,  // 告诉jQuery不要去处理发送的数据
	             contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
	             success: function(msg){
	               alert(msg);
					//1、关闭模态框
					$("#mymodalE").modal("hide");
					location.href="${PATH}/admin/AllAdmins.do"; 
	             }
	        });
		 });
		
		<!-- 定一个提醒用户修改的方法，参数就是用户的ID -->
		function updateYxhz(id){
			if(confirm("确定要修改id为"+id+"的信息吗？")){
			
				//如果确定，就访问controller层
				location.href="${PATH}/admin/GotoUpdateYxhz.do/?id="+id;
			}
		}
		 
		 
		<!-- 定一个提醒展览图删除的方法，参数就是展览图的ID -->
		function deleteYxhz(id){
			if(confirm("确定要删除id为"+id+"的信息吗？")){
			
				//如果确定，就访问controller层
				location.href="${PATH}/admin/deleteYxhz.do/?id="+id;
				alert("删除"+id+"成功！")
			}
		}
		
		//图片的缩略图
		 document.getElementById('mFileE').onchange = function (ev) {
            //判断 FileReader 是否被浏览器所支持
            if (!window.FileReader) return;

            console.log(ev);

            var file = ev.target.files[0];  

            if(!file.type.match('image/*')){
                alert('上传的图片必修是png,jpg格式的！');
                ev.target.value = ""; //显示文件的值赋值为空
                return;
            }

            var reader = new FileReader();  // 创建FileReader对象

            reader.readAsDataURL(file); // 读取file对象，读取完毕后会返回result 图片base64格式的结果

            reader.onload = function(e){
                document.getElementById('mImgE').src = e.target.result;
            }

        }
	</script>
	